﻿@model  IEnumerable<WebSoftSeo.Models.ServicesDetail>
@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int i=1;
}
<!-- slider -->
        <div class="sliderWrap">
        	<div class="container">
        		<div class="flexslider">
                <ul class="bxslider">
                   <li>
                        <a href="#"><img class="img-responsive" src="data/sl1.jpg"/></a>
                        <div class="slideDesc">
                            <h2>Responsive</h2>
                            <span>
                                Responsive trên mọi thiết bị
                            </span>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img class="img-responsive" src="data/sl1.jpg"/></a>
                        <div class="slideDesc">
                            <h2>Responsive</h2>
                            <span>
                                Responsive trên mọi thiết bị
                            </span>
                            <p>
                                <a class="btnSlide" href="#">GET STRAT</a>
                           </p>
                        </div>
                    </li>
                </ul> 
                <div class="clearfix"></div>
            </div>
            </div>
        </div>
        <!-- End slider -->
        <!-- Content Home -->
        <div class="wrapContentHome">
        	<div class="container">
            	<div class="divContentHome">
                	<div class="row">
                        
                        @foreach(var item in Model)
                        {
                            string color = "itemSer bgColor" + i;
                            i++;
                    	<div class="autosizeSer">
                        	<div class="@color">
                            	<div class="mask"></div>
                            	<div class="@item.Class"></div>
                            	<div class="itemSerTest">
                                	<p class="titleser"><a href="@Url.Content("~/Service/Detail/?id="+item.ID)">@item.Name</a></p>
                                    <p>@item.ShortDescription</p>
                                </div>
                            </div>
                        </div>
                        }
                       @* <div class="autosizeSer">
                        	<div class="itemSer bgColor2">
                            	<div class="mask"></div>
                            	<div class="icItemSer2"></div>
                            	<div class="itemSerTest">
                                	<h1><a href="#">SEO Friendly</a></h1>
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
                                </div>
                            </div>
                        </div>
                        <div class="autosizeSer">
                        	<div class="itemSer bgColor3">
                            	<div class="mask"></div>
                            	<div class="icItemSer3"></div>
                            	<div class="itemSerTest">
                                	<h1><a href="#">SOFTWare</a></h1>
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
                                </div>
                            </div>
                        </div>
                        <div class="autosizeSer">
                        	<div class="itemSer bgColor4">
                            	<div class="mask"></div>
                            	<div class="icItemSer4"></div>
                            	<div class="itemSerTest">
                                	<h1><a href="#">Web Commerce</a></h1>
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
                                </div>
                            </div>
                        </div>
                        <div class="autosizeSer">
                        	<div class="itemSer bgColor5">
                            	<div class="mask"></div>
                            	<div class="icItemSer5"></div>
                            	<div class="itemSerTest">
                                	<h1><a href="#">Services designed graphical</a></h1>
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
                                </div>
                            </div>
                        </div>
                        <div class="autosizeSer">
                        	<div class="itemSer bgColor6">
                            	<div class="mask"></div>
                            	<div class="icItemSer6"></div>
                            	<div class="itemSerTest">
                                	<h1><a href="#">RTL Language</a></h1>
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
                                </div>
                            </div>
                        </div>*@
                    </div>
                    <div class="row">
                    	<div class="wrapAccordion">
                        	<h3>Lý do bạn chọn Websoftseo</h3>
                            <div class="divAccordion">
                            	<h3 class="accorTitle">
                                	Collap 1
                                </h3>
                                <div class="testAccor">
                                	<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed...</span>
                                    <a href="#" class="view">Xem thêm</a>
                                </div>
                             </div>
                             <div class="divAccordion">
                                <h3 class="accorTitle">
                                	Collap 2
                                </h3>
                                <div class="testAccor">
                                	<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed...</span>
                                    <a href="#" class="view">Xem thêm</a>
                                </div>
                             </div>
                             <div class="divAccordion">
                                <h3 class="accorTitle">
                                	Collap 3
                                </h3>
                                <div class="testAccor">
                                	<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed...</span>
                                    <a href="#" class="view">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                        <div class="wrapdivTap">
                            <div class="wrapTap">
                                <div class="myTabs">
                                    <ul>                                  
                                        <li class="active"><a href="#notes">Overview</a></li>
                                        <li><a href="#pruchas">Features</a></li>
                                        <li><a href="#account">About Us</a></li>
                                    </ul>
                                    <div id="notes" class="myTabInner">
                                        <div class="myTabCont">
                                            <div class="imgOv">
                                            	<img class="img-responsive" src="data/h1.png">
                                            </div>
                                            <div class="testOv">
                                            	<h1><a href="#">Venus is a Unique Design. It has different Preset Styles</a></h1>
                                                <p>Lorem ipsum dolor sit amet consectetur adipis ltem books.Lorem ipsum dolor sit amet consectetur adipis.dolor sit amet consectetur</p>
                                                <div class="btnButton">
                                                	<a href="#" class="button">Xem</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="pruchas" class="myTabInner">
                                    	<div class="myTabCont">
                                            Accounting-related settings are managed on <b>the parent company</b>
                                        </div>
                                    </div>
                                    <div id="account" class="myTabInner">
                                    	<div class="myTabCont">
                                             Accounting-related settings are managed on <b>the parent company</b>
                                        </div>
                                    </div>
                                </div>
                            </div>
                       </div>
                       <div class="clearfix"></div>
                   </div>
                   <!-- Partner -->
                   <div class="divPartner">
                   		<h3>Khách hàng</h3>
                    <div class="divPartnerInner">
                        <ul class="partner">
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                            <li><a href="#"><img src="data/partner1.png" alt="" /></a></li>
                        </ul>
                </div>
                </div>
                <!-- End: Partner -->
                </div>
            </div>
        </div>